<template>
    <v-dialog
            v-model="deleteCategoryDialog"
            persistent
            overlay-opacity="0.2"
            max-width="460px"
    >
        <v-card outlined>
            <my-loading-overlay :loading-overlay="loadingOverlay"></my-loading-overlay>
            <v-card-title class="subtitle-1" style="border-bottom: 1px solid #d0dfe7">确认删除</v-card-title>
            <v-card-text class="text-center mt-4">
                <div>确认要删除该分类吗？</div>
                <div>删除分类会删除分类下的所有链接</div>
            </v-card-text>
            <v-card-actions>
                <v-btn class="ml-10" width="160" color="primary" @click="deleteDialog()">确认</v-btn>
                <v-btn class="ml-10" width="160" color="warning" @click="$emit('reset-delete')">取消</v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

<script>
    import MyLoadingOverlay from "../../common/MyLoadingOverlay";
    export default {
        name: "MyDeleteCategoryDialog",
        components: {MyLoadingOverlay},
        props: {
            deleteCategoryDialog: {
                type: Boolean,
                default: false
            },
            id: {
                type: Number,
                default: 0
            }
        },
        data() {
            return {
                loadingOverlay: false
            }
        },
        methods: {
            deleteDialog() {
                let _this = this;
                _this.loadingOverlay = true;
                _this._delete({
                    url: 'system/collection/delete-category',
                    data: {
                        id: _this.id
                    }
                }).then(rsp => {
                    _this.$emit('delete-success');
                }).catch(error => {
                    console.log(error);
                    _this.$serverError();
                }).finally(() => {
                    _this.loadingOverlay = false;
                })
            }
        }

    }
</script>

<style scoped>

</style>